<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HUGO-静态博客的利器 | 嚣张协奏曲-blog</title>

    
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />




<meta name="author" content="嚣张协奏曲" />
<meta name="description" content="为了这个他世界操碎了心，终于那个人准备重出江湖搭建了博客&amp;hellip;
" />



<meta name="generator" content="Hugo 0.79.1" />

<link rel="canonical" href="https://xzxzq.gitee.io/posts/buildBlogByHugo/" />


<meta property="og:title" content="HUGO-静态博客的利器" />
<meta property="og:description" content="为了这个他世界操碎了心，终于那个人准备重出江湖搭建了博客&hellip;" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://xzxzq.gitee.io/posts/buildBlogByHugo/" />
<meta property="article:published_time" content="2020-12-25T16:36:20+08:00" />
<meta property="article:modified_time" content="2020-12-25T16:36:20+08:00" />



<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="HUGO-静态博客的利器"/>
<meta name="twitter:description" content="为了这个他世界操碎了心，终于那个人准备重出江湖搭建了博客&hellip;"/>


<link rel="stylesheet" href="/css/semantic.min.css" />
<link rel="stylesheet" href="/css/icomoon.css" />
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css" />
<link rel="stylesheet" href="/css/github-markdown.css" />
<link rel="stylesheet" href="/css/site.css" />

<style>
  a:hover {
    text-decoration: underline; 
  }

  
  a {
    color: seagreen !important;
  }
  

  
  .inverted a,
  .inverted a:hover {
     color: darkseagreen !important;
  }
  

  
  body.default {
    
    background-color: glay;
    

    
    background-image: url(/img/city_night.gif);
    
  }
  

  
</style>

    


  
    <link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/gruvbox-light.min.css" />
  





  </head>

  <body class="default">
    
<nav class="ui secondary inverted menu dream-menu">

  <div class="item">
    <i class="large link bullseye icon dream-flip-toggle" title="翻转！"></i>
  </div>
  <div class="item">
    <i class="large link home icon" title="首页" onclick="window.location.href = 'https:\/\/xzxzq.gitee.io\/'"></i>
  </div>
  <div class="item">
    <i class="large link icon theme-switch" onclick="themeSwitch()"></i>
  </div>
  
</nav>

    <div class="flip-container">
      <div class="flipper">
        <section class="front">
          <div class="dream-max-width">
            
<div class="ui centered relaxed grid dream-grid">
  <div class="sixteen wide mobile sixteen wide tablet twelve wide computer column markdown-body dream-single" id="dream-save-post-as-img">
    
    <section class="ui top attached segment">
      <header>
        <h1 class="ui large header">
          HUGO-静态博客的利器
          <div class="sub header">
            @
            
              
                嚣张协奏曲
              
            

            | 
                星期五，十二月 25 日，2020 年
              

            | 5 分钟阅读

            | 更新于
              
                星期五，十二月 25 日，2020 年
              
          </div>
        </h1>
      </header>

      <article class="main"><p>为了这个他世界操碎了心，终于那个人准备重出江湖搭建了博客&hellip;</p>
<h2 id="1基础环境">1、基础环境</h2>
<ul>
<li>
<p><strong>win10操作系统</strong></p>
<p>本人所有操作都在windows系统下进行</p>
</li>
<li>
<p><strong>gti环境</strong></p>
<p>同步博客的重要工具，使用方式本文不介绍</p>
</li>
<li>
<p><strong>Gitee或GitHub账号</strong></p>
<p>静态博客的搭建依托与这两个平台提供的page服务</p>
</li>
</ul>
<h2 id="2装配hugo">2、装配HUGO</h2>
<ul>
<li>
<p>下载本人创建这个文章的时候的版本：<a href="https://github.com/gohugoio/hugo/releases/download/v0.79.1/hugo_0.79.1_Windows-64bit.zip">hugo 0.79.1 win64版本下载</a></p>
<p>也可直接前往官方仓库<a href="https://github.com/gohugoio/hugo/releases">hugo下载</a>，选择基础版本</p>
</li>
</ul>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/select_hugo_version.png" alt="select_hugo_version"></p>
<ul>
<li>
<p>下载好的压缩包里有仅一个可执行文件，将他解压到软件的安装目录例如<code>D:\Software\hugo</code></p>
</li>
<li>
<p>将hugo加入环境变量</p>
<ul>
<li><code>win + r</code>打开运行，输入<code>sysdm.cpl</code>，打开系统属性页面，选择&quot;高级&quot;，点击&quot;环境变量&quot;</li>
<li>在path里面加入hugo.exe的当前路径，即<code>D:\Software\hugo</code></li>
</ul>
</li>
<li>
<p>测试一下hugo能不能用，在命令行中输入<code>hugo version</code>，出现如下字样就是设置好了</p>
<pre><code>❯ hugo version
Hugo Static Site Generator v0.79.1-EDB9248D windows/amd64 BuildDate: 2020-12-19T15:44:19Z
</code></pre></li>
</ul>
<h2 id="3创建hugo站点">3、创建hugo站点</h2>
<p>站点也就是hugo的工作目录，生成静态页面的所需要的环境。</p>
<p>打开命令行，进入到一个合适的目录输入命令</p>
<pre><code>❯ hugo new site [指定目录]
</code></pre><p>执行后就会在指定的目录生成基本文件，当出现如下结果就是成功创建</p>
<pre><code>❯ hugo new site sample
Congratulations! Your new Hugo site is created in D:\WorkSpase\study\test\sample.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the &quot;hugo new theme &lt;THEMENAME&gt;&quot; command.
2. Perhaps you want to add some content. You can add single files
   with &quot;hugo new &lt;SECTIONNAME&gt;\&lt;FILENAME&gt;.&lt;FORMAT&gt;&quot;.
3. Start the built-in live server via &quot;hugo server&quot;.

Visit https://gohugo.io/ for quickstart guide and full documentation.
</code></pre><p>进入到之前指定的目录，就会看到如下目录结构</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/directory_structure.png" alt="directory_structure"></p>
<h2 id="4安装一个主题">4、安装一个主题</h2>
<p>在官网的<a href="https://themes.gohugo.io/">主题商城</a>上选择一个主题，下载并解压到站点<code>themes</code>目录下，例如我选择<a href="https://themes.gohugo.io/hugo-theme-stack/">Stack</a>，解压的根目录一定得是&quot;hugo-theme-stack&quot;，否则hugo会找不到主题</p>
<p>或者通过git命令的方式下载</p>
<pre><code>❯ cd .\themes\
❯ git clone https://github.com/CaiJimmy/hugo-theme-stack.git hugo-theme-stack
</code></pre><p>打开主题目录，复制archetypes到站点根目录，这里面是主题配套的文章模板文件</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/stack_theme.png" alt="stack_theme"></p>
<p>然后打开exampleSite，复制config.yaml到站点根目录，并删掉原来的config.toml文件</p>
<h2 id="5创建文章">5、创建文章</h2>
<p>就在当前目录下输入命令就会按照默认模板生成文件</p>
<pre><code>hugo new post/test.md
</code></pre><p>这里<code>test.md</code>是我们需要创建的文件名字，一般使用markdown写博客，所以以需要<code>.md</code>结尾。如果创建成功，会在命令行输出生成的文件位置，如：</p>
<pre><code>❯ hugo new test.md
D:\WorkSpase\study\test\sample\content\post\test.md created
</code></pre><p>现在就可以打开<code>test.md</code>进行编写，如：</p>
<pre><code>❯ vim D:\WorkSpase\study\test\sample\content\test.md
</code></pre><pre><code>---
title: &quot;文章标题&quot;
date: 2020-12-26T16:03:58+08:00
draft: true
categories:
    - 博客
tags:
    - Hugo
    - Stack
---
这里是主体内容
hello world

</code></pre><p>其中<code>---</code>所包围的部分是当前文章的一些配置</p>
<ul>
<li>title：文章标题</li>
<li>date：创建日期</li>
<li>draft：草稿标记，设置为<code>true</code>时，hugo就会忽略这个文件</li>
<li>categories：主题的设置，用来设置文章分类</li>
<li>tags：主题的设置，用来设置文章标签</li>
</ul>
<p>都写好后，需要把这个<code>darft:true</code>删除掉</p>
<h2 id="6编译和调试">6、编译和调试</h2>
<p>直接在站点根目录命令行输入<code>hugo</code>就可以编译生成静态页面，同时会在根目录创建public文件夹</p>
<p>想要在本地调试，可以在命令行输入</p>
<pre><code>❯ hugo server
</code></pre><p>编译成功的结果如下所示</p>
<pre><code>Start building sites …

                   | EN
-------------------+-----
  Pages            | 16
  Paginator pages  |  0
  Non-page files   |  1
  Static files     |  0
  Processed images |  2
  Aliases          |  7
  Sitemaps         |  1
  Cleaned          |  0

Total in 78 ms
</code></pre><p>开启调试后，可以在<a href="http://localhost:1313/">http://localhost:1313/</a>预览到自己的博客站点如：</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/blog_server_test.png" alt="blog_server_test"></p>
<p>调试期间也可以添加修改md文件和图片，本地服务会实时展示效果，等到调试的差不多了就可进行下一步</p>
<h2 id="7创建远程仓库">7、创建远程仓库</h2>
<h3 id="71gitee">7.1、Gitee</h3>
<ul>
<li>
<p>先创建一个公开的仓库</p>
</li>
<li>
<p>仓库名称与账户名一致（为了缩短url路径）</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/gitee_new_project.png" alt="gitee_new_project"></p>
</li>
<li>
<p>在本地站点的public目录下初始化git仓库</p>
<pre><code>❯ cd .\public\
❯ git init
</code></pre></li>
<li>
<p>绑定远程仓库</p>
<p>在仓库的主页复制git链接，其中git@部分要填写<strong>自己</strong>的仓库地址</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/gitee_git.png" alt="gitee_git"></p>
<pre><code>❯ git remote add origin git@gitee.com:xzxzq/xzxzq.git
</code></pre></li>
<li>
<p>打开gitee，找到刚创建的仓库主页，点page服务</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/pages_server.png" alt="pages_server"></p>
</li>
<li>
<p>按照默认设置，点部署</p>
<p>成功后会在页面当前页面显示<em>已开启Gitee Pages服务</em>，复制后面的网址地址</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/page.png" alt="page"></p>
</li>
<li>
<p>修改站点根目录下的config.yaml文件，修改以下的属性</p>
<pre><code>baseurl: https://xzxzq.gitee.io
languageCode: zh-CN
title: XXX的博客
</code></pre><p>baseurl填写刚才复制的地址，title网站标签页的标题，注意分号后面要有一个空格</p>
</li>
<li>
<p>添加、提交、推送一气呵成</p>
<pre><code>❯ git add *
❯ git commit -m &quot;update config&quot;
❯ git push --force origin master
</code></pre></li>
<li>
<p>回到启用pages的页面，一定要再点击更新，这样再访问自己的页面时就会和本地调试时一致</p>
</li>
</ul>
<p>其他问题可参考<a href="http://git.mydoc.io/?t=154714">码云pages</a></p>
<h3 id="72-github">7.2、 Github</h3>
<ul>
<li>
<p>创建一个公开的仓库</p>
</li>
<li>
<p>仓库的名字与github主页路径名一致（为了缩短url路径）</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/github_new_project.png" alt="github_new_project"></p>
<p>这里提示错误信息是因为我已经创过了这个仓库</p>
</li>
<li>
<p>同样绑定远程仓库，在仓库的主页复制git链接</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/github_git.png" alt="github_git"></p>
<pre><code>❯ git remote add origin git@github.com:xzxzq/xzxzq.github.io.git
</code></pre></li>
<li>
<p>打开github的仓库设置</p>
<p>在仓库主页的上方有个<code>Settings</code>标签，点击进入</p>
</li>
<li>
<p>选择最下面的Github Pages服务开启</p>
<p>Branch选择master其他的默认就行，然后点Save，之后在上方会出现主页地址，复制它</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/github_page.png" alt="github_page"></p>
</li>
<li>
<p>修改站点根目录下的config.yaml文件，修改以下的属性</p>
<pre><code>baseurl: https://xzxzq.github.io/
</code></pre><p>baseurl填写刚才复制的地址，title网站标签页的标题，注意分号后面要有一个空格</p>
</li>
<li>
<p>添加、提交、推送</p>
</li>
</ul>
<h2 id="8使用基本流程">8、使用基本流程</h2>
<p>安装并配置好主题后，只需要重复创建、调试、上传文章的过程，如图所示</p>
<p><img src="https://gitee.com/xzxzq/img/raw/master/image/hugo%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B.png" alt="hugo使用流程"></p>
<h2 id="9参考">9、参考</h2>
<p>[[1]@GoHugoIO@spf13@bepsays.Hugo Documentation[EB/OL].https://gohugo.io/documentation/,2013–2020.</p>
<p>[2]CoderZh.Hugo中文文档[EB/OL].https://www.gohugo.org/,2015.</p>
<p>[3]Team@OSC.码云（Gitee.com）帮助文档 V1.2[EB/OL].http://git.mydoc.io/?t=154714,2020.</p>
<p>[4]Jimmy Cai.hugo theme stack中文文档[EB/OL].https://docs.stack.jimmycai.com/v/zh-cn/,2018.</p></article>
    </section>

    <footer class="ui attached segment dream-tags" data-html2canvas-ignore>
      
        
          <a class="ui label" href="/tags/github" title="github">github</a>
        
          <a class="ui label" href="/tags/gitee" title="gitee">gitee</a>
        
          <a class="ui label" href="/tags/hugo" title="hugo">hugo</a>
        
      
      <div
        class="ui label"
        style="float: right; cursor: pointer;"
        onclick="savePostAsImg()">
        <i class="save icon"></i>保存为图片
      </div>
    </footer>

    
      <footer class="ui attached segment" data-html2canvas-ignore>
        本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可。
      </footer>
    

    
    
    
      <div class="ui segment utterances-comments" data-html2canvas-ignore>
        <script src="https://utteranc.es/client.js"
          repo="xzxzq/SocialComments"
          issue-term="og:title"
          theme="github-light"
          crossorigin="anonymous"
          async>
        </script>
      </div>
    

    

  </div>
  <aside class="sixteen wide mobile sixteen wide tablet four wide computer column dream-single-aside">
    
    
      <div class="ui segment toc">
        <nav id="TableOfContents">
  <ul>
    <li><a href="#1基础环境">1、基础环境</a></li>
    <li><a href="#2装配hugo">2、装配HUGO</a></li>
    <li><a href="#3创建hugo站点">3、创建hugo站点</a></li>
    <li><a href="#4安装一个主题">4、安装一个主题</a></li>
    <li><a href="#5创建文章">5、创建文章</a></li>
    <li><a href="#6编译和调试">6、编译和调试</a></li>
    <li><a href="#7创建远程仓库">7、创建远程仓库</a>
      <ul>
        <li><a href="#71gitee">7.1、Gitee</a></li>
        <li><a href="#72-github">7.2、 Github</a></li>
      </ul>
    </li>
    <li><a href="#8使用基本流程">8、使用基本流程</a></li>
    <li><a href="#9参考">9、参考</a></li>
  </ul>
</nav>
      </div>
    

    <article class="dream-header">
  <section class="ui top attached center aligned segment">
    <div class="ui small circular image">
      
        <img src="/img/head.jpg">
      
    </div>

    
    <div class="ui medium header">
    
      嚣张协奏曲 的博客
      <div class="sub header" style="margin-top: 0.5rem;">百无禁忌</div>
    
    </div>
    

    <div class="ui horizontal list">
      
      <a class="item" href="/posts">
        <i class="archive icon" title="归档"></i>
      </a>
      
      <a class="item" href="/tags">
        <i class="tags icon" title="所有标签"></i>
      </a>
      <a class="item" href="/categories">
        <i class="th list icon" title="所有分类"></i>
      </a>
    </div>
  </section>

  
  <section class="ui attached center aligned segment dream-tags">
    
      
      
      <a class="ui label" href="/tags/IDEA/" title="I D E A">
        I D E A
      </a>
    
      
      
      <a class="ui label" href="/tags/Maven/" title="Maven">
        Maven
      </a>
    
      
      
      <a class="ui label" href="/tags/Tomcat/" title="Tomcat">
        Tomcat
      </a>
    
      
      
      <a class="ui label" href="/tags/excel/" title="Excel">
        Excel
      </a>
    
      
      
      <a class="ui label" href="/tags/gantt/" title="Gantt">
        Gantt
      </a>
    
      
      
      <a class="ui label" href="/tags/gitee/" title="Gitee">
        Gitee
      </a>
    
      
      
      <a class="ui label" href="/tags/github/" title="Github">
        Github
      </a>
    
      
      
      <a class="ui label" href="/tags/hugo/" title="Hugo">
        Hugo
      </a>
    
      
      
      <a class="ui label" href="/tags/java/" title="Java">
        Java
      </a>
    
      
      
      <a class="ui label" href="/tags/maven/" title="Maven">
        Maven
      </a>
    
  </section>
  

  
  <section class="ui attached segment dream-categories">
    <div class="ui accordion">
      
      
      
      
      

      
        

        
          <div class="title">
            <i class="dropdown icon"></i>
            
            
            <a class="item" href="/categories/Excel%E6%8A%80%E5%B7%A7/" title="Excel技巧">
              Excel技巧
            </a>
          </div>
          <div class="content">
            <div class="ui list">
            
              <div class="item">
                <div class="content">
                  <a class="item" href="/posts/excelAndGantt/">利用Excel制作动态甘特图</a>
                </div>
              </div>
            
            </div>
          </div>
        
      
        

        
          <div class="title">
            <i class="dropdown icon"></i>
            
            
            <a class="item" href="/categories/HUGO%E6%95%99%E7%A8%8B/" title="H U G O教程">
              H U G O教程
            </a>
          </div>
          <div class="content">
            <div class="ui list">
            
              <div class="item">
                <div class="content">
                  <a class="item" href="/posts/buildBlogByHugo/">HUGO-静态博客的利器</a>
                </div>
              </div>
            
            </div>
          </div>
        
      
        

        
          <div class="title">
            <i class="dropdown icon"></i>
            
            
            <a class="item" href="/categories/%E9%97%AE%E9%A2%98%E8%AE%B0%E5%BD%95/" title="问题记录">
              问题记录
            </a>
          </div>
          <div class="content">
            <div class="ui list">
            
              <div class="item">
                <div class="content">
                  <a class="item" href="/posts/lombok_error_12282020/">使用Lombok时出现错误</a>
                </div>
              </div>
            
              <div class="item">
                <div class="content">
                  <a class="item" href="/posts/problem_1/">执行junit单元测试出错</a>
                </div>
              </div>
            
            </div>
          </div>
        
      

      
    </div>
  </section>
  

  <section class="ui attached segment header-socials">
    <nav class="ui secondary menu dream-menu dream-socials">
  
  
    <div class="item">
      <a href="mailto:alonealive@foxmail.com">
        <i class=" mail icon" title="Email"></i>
      </a>
    </div>
  

  

  

  

  

  

  
    <div class="item">
      <a href="https://github.com/https://github.com/xzxzq" target="_blank">
        <i class=" github icon" title="GitHub"></i>
      </a>
    </div>
  

  

  
</nav>

  </section>

  <section class="ui bottom attached center aligned segment">
    
      <p>© 2020 - 2021 嚣张协奏曲-blog</p>
    

    <p>Powered by <a href="https://gohugo.io/" target="_blank">Hugo</a> with theme <a href="https://github.com/g1eny0ung/hugo-theme-dream" target="_blank">Dream</a>.</p>

    
  </section>
</article>

  </aside>
</div>

          </div>
        </section>
        <section class="back">
          <div class="dream-max-width">
            <div class="ui centered relaxed grid dream-grid dream-back">
  
  
  
    <section class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
      <article>
        <div class="ui top attached segment">
          <h3 class="ui header">关于我</h3>
        </div>
        <div class="ui bottom attached segment markdown-body">
          <p>这个世界很大也总在变化，抓不住的是时间，留得下的是回忆。这个角落是个博客，有的只是一段凝固的时光，有的只是时代尘埃的一个喘息。</p>

        </div>
      </article>
    </section>
  

  <section class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    <article>
      <div class="ui top attached segment">
        <h3 class="ui header">社交链接</h3>
      </div>
      <div class="ui bottom attached segment">
        <nav class="ui secondary menu dream-menu dream-socials">
  
  
    <div class="item">
      <a href="mailto:alonealive@foxmail.com">
        <i class="large mail icon" title="Email"></i>
      </a>
    </div>
  

  

  

  

  

  

  
    <div class="item">
      <a href="https://github.com/https://github.com/xzxzq" target="_blank">
        <i class="large github icon" title="GitHub"></i>
      </a>
    </div>
  

  

  
</nav>

      </div>
    </article>
  </section>

  <section class="sixteen wide mobile eight wide tablet four wide computer column dream-column">
    
      <footer class="ui segment">
        本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可。
      </footer>
    
  </section>

  
  
</div>

          </div>
        </section>
      </div>
    </div>

    <script>
  window.backgroundDark =  null 
  window.backgroundImageDark =  null 
  window.darkNav =  true 
  window.hasTwitterEmbed =  null 

  if (window.hasTwitterEmbed) {
    
    window.twttr = (function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {}
      if (d.getElementById(id)) return t
      js = d.createElement(s)
      js.id = id
      js.src = 'https://platform.twitter.com/widgets.js'
      fjs.parentNode.insertBefore(js, fjs)

      t._e = []
      t.ready = function (f) {
        t._e.push(f)
      }

      return t
    })(document, 'script', 'twitter-wjs')
  }
</script>
<script src="/js/jquery.min.js"></script>
<script src="/js/semantic.min.js"></script>
<script src="/js/jquery.overlayScrollbars.min.js"></script>
<script src="/js/header.js"></script>
<script src="/js/main.js"></script>
<script src="/js/theme.js"></script>

    
<script src="/js/html2canvas.min.js"></script>
<script src="/js/post.js"></script>


  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

  
    
      <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/ocaml.min.js"></script>
     
  

  <script>
  hljs.initHighlightingOnLoad()
  setHighlightTheme()

  function setHighlightTheme() {
    var isDark = localStore.getItem('hugo-theme-dream-is-dark')
    var lightTheme = "gruvbox-light"
    var darkTheme = "gruvbox-dark"
    var theme = isDark ? darkTheme : lightTheme

    $('link[data-highlight]').attr('href', 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/' + theme + '.min.css')
    $('pre').css('background', isDark ? '#333' : '')
  }
</script>





    

    
  </body>
</html>
